import { ref, watch } from 'vue'

/**
 * localStorage 组合式函数
 * 将数据自动同步到 localStorage
 * @param key localStorage 的键名
 * @param initialValue 初始值
 * @returns 响应式的存储值
 */
export function useLocalStorage<T>(key: string, initialValue: T) {
  // 尝试从 localStorage 获取已存储的值
  const storedValue = localStorage.getItem(key)
  // 创建响应式的值，优先使用已存储的值，否则使用初始值
  const value = ref<T>(
    storedValue ? 
      // 尝试解析 JSON，如果失败则使用初始值
      (() => {
        try {
          return JSON.parse(storedValue)
        } catch {
          return initialValue
        }
      })() 
      : initialValue
  )
  
  // 监听值的变化，自动更新到 localStorage
  watch(value, (newValue) => {
    localStorage.setItem(key, JSON.stringify(newValue))
  })
  
  // 返回响应式的值
  return value
} 